<template>
    <div class="myheader">
        <div class="rcontent">
            <el-dropdown>

                <span class="el-dropdown-link">
                    <span>{{ username }}</span>
                    <img class="userhead" src="../assets/head.png" alt="head">
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="logout()">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>

        </div>
    </div>
</template>

<script>
import Cookie from 'js-cookie'
import loginAPI from '../api/login';
const options = {
    data() {
        return {
            username: "用户姓名"
        }
    },
    methods: {
        logout() {
            loginAPI.loginoutApi().then(() => {
                Cookie.remove("token");
                this.$router.push("/login")
            })
        },
        selectUserName() {
            loginAPI.getUserInformation().then(res => {
                if (res.data.code == 0) {
                    this.$message.error(res.data.msg)
                    return
                }
                console.log(res.data.data)
                this.username = res.data.data
            })
        }
    },
    created() {
        //自动加载indexs方法
        this.selectUserName();
    },
}
export default options
</script>

<style lang="less" scoped>
.myheader {
    background-color: #ebeef2;
    width: 100%-250px;
    height: 70px;

    .rcontent {
        float: right;
        margin-left: 0;
        margin-right: 15px;
        margin-top: 15px;

        .userhead {
            vertical-align: middle;
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }

        span {
            margin-right: 10px;
            font-size: 16px;
            color: rgb(81, 81, 81);
        }
    }
}
</style>